<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo23-从16数过来-简单路由</title>
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
    <div id="app"> 
    </div>
</body>

<script>

const NotFound = { template: '<p>Page not found 112233 </p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '': Home,
  '#/': Home,
  '#/about': About
}

/**
 * 如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：
 */  
new Vue({
  el: '#app',
  data: {
    // currentRoute: window.location.pathname  /* pathname 在 live reload server中是个文件全路径。不可使用pathname去做匹配 */
    currentRoute: window.location.hash  /* 使用hash是比较好的选择 */
  },
  computed: {
    ViewComponent () {
      console.log(window.location.hash);
      console.log(window.location);
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

</script>
</html>